import { Menu } from "antd";
import SubMenu from "antd/lib/menu/SubMenu";
import { Link } from "react-router-dom";

interface MenuProps {
  key: string;
  path: string;
  text: string;
  sub?: MenuProps[];
}

interface IMenuProps {
  options: MenuProps[];
}

export const DynamicMenu = (menuData: IMenuProps): JSX.Element => {
  return (
    <Menu>
      {menuData.options.map((item) => {
        if (item.sub) {
          return (
            <SubMenu key={item.key} title={item.text}>
              <DynamicMenu options={item?.sub} />
            </SubMenu>
          );
        } else {
          return (
            <Menu.Item key={item.key}>
              <Link to={item.key}>{item.text}</Link>
              {/* {item.text} */}
            </Menu.Item>
          );
        }
      })}
    </Menu>
  );
};
